<template>
  <div class="content">
    <el-form :inline="true" :model="formData" size="small">
      <el-form-item label="用户ID/账号">
        <el-input v-model="formData.account"></el-input>
      </el-form-item>
      <el-form-item label="文件名">
        <el-input v-model="formData.fileName"></el-input>
      </el-form-item>
      <el-form-item label="模块">
        <el-select v-model="formData.model">
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="item in $store.state.history.modelList"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button type="info" @click="onReset">重置</el-button>
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker
          v-model="formData.timer"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <el-table
      :data="$store.state.history.tableData"
      border
      v-loading="$store.state.history.isLoading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      style="width: 100%"
    >
    <el-table-column
        prop="id"
        label="ID"
        align="center"
        width="100"
      >
    </el-table-column>
      <el-table-column
        prop="model"
        label="软件/模块"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="uploadTime"
        label="时间"
        sortable
        align="center"
      ></el-table-column>
      <el-table-column
        prop="fileName"
        :show-overflow-tooltip="true"
        label="文件名"
        align="center"
        width="240"
      ></el-table-column>
      <el-table-column
        prop="userId"
        label="用户ID"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="userName"
        label="用户账号名"
        width="240"
        align="center"
      ></el-table-column>
      <el-table-column label="公司备注" align="center" width="200">
        <template slot-scope="scope">
          <span v-if="!scope.row.isEdit">
            {{ scope.row.companyMessage || "--" }}
            <el-button
              style="margin-left: 5px;"
              type="text"
              @click="scope.row.isEdit = true"
              >编辑</el-button
            >
          </span>
          <div class="editCompany flex" v-else>
            <el-input
              size="small"
              v-model="scope.row.editValue"
              :placeholder="scope.row.editValue"
              style="margin-right: 4px;"
            ></el-input>
            <el-button
              size="mini"
              type="success"
              icon="el-icon-success"
              circle
              @click="hanldeEdit(scope.row)"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-error"
              circle
              @click="scope.row.isEdit = false"
            ></el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column  width="240" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="lookResult(scope.row)">查看结果</el-button>
          <el-button type="text" size="small" @click="downloadExl(scope.row, 0)"
            >下载原始表</el-button
          >
          <el-button type="text" size="small" @click="downloadExl(scope.row, 1)"
            >下载结果表</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin: 20px;float: right;"
      background
      :page-size="$store.state.history.pageSize"
      :current-page.sync="$store.state.history.current"
      @current-change="handleChange"
      layout="total, prev, pager, next"
      :total="$store.state.history.total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { updateCompany } from "@/api/table.js";
import dayjs from "dayjs";
import { getStore } from "@/utils/common";
import { mapActions, mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近三天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      formData: {
        account: "",
        fileName: "",
        timer: "",
        model: "",
      },
      lang: getStore("spr-lang") || "zh",
    };
  },
  mounted() {
    this.formData = this.formDataValue 
    this.requestData()
  },
  computed: {
    ...mapState('history',['modelNameDetailPath', 'current', 'pageSize', 'formDataValue'])
  },
  methods: {
    ...mapActions('history',['getHistoryList']),
    ...mapMutations('history',['SET_PAGE', 'RESET_FORM', 'SAVE_FORM']),
    // 跳转到详情 
    lookResult(row) {
      this.$router.push({
        path: this.modelNameDetailPath[row.model] ? this.modelNameDetailPath[row.model] : '/',
        query: {
          id: row.id,
          name: row.fileName,
          time: row.uploadTime
        }
      })
    },
    // 编辑备注
    async hanldeEdit(row) {
      try {
        await updateCompany({
          id: row.id,
          companyMessage: row.editValue,
        });
        row.isEdit = false;
        this.requestData()
      } catch (err) {
        return err;
      }
    },
    downloadExl(row, type) {
      let lang = this.lang === "zh" ? "CN" : "ENG";
      const href = `${process.env.BASE_URL}receive/download/excel/${type}/${lang}/${row.uuid}`;
      window.open(href, "_blank");
    },
    filterHandler(value, row, column) {
      console.log(value, column);
      const property = column["property"];
      return row[property] === value;
    },
    onSubmit() {
      this.SET_PAGE(1)
      const request = this.setRequestData();
      this.SAVE_FORM({
        account: request.id,
        fileName: request.fileName,
        timer: request.startT && request.endT ? [new Date(request.startT), new Date(request.endT)] : '',
        model: request.model,
      })
      this.getHistoryList(request);
    },
    onReset() {
      this.formData.account = "";
      this.formData.fileName = "";
      this.formData.timer = "";
      this.formData.model = "";
      this.formData.moduleName = ""
      this.RESET_FORM()
      this.getHistoryList({});
    },
    handleChange(val) {
      this.SET_PAGE(val)
      this.requestData()
    },
    requestData() {
      const request = this.setRequestData();
      this.getHistoryList(request);
    },
    setRequestData() {
      const { account, fileName, timer, model } = this.formData;
      const request = {
        id: account,
        fileName: fileName,
        startT: timer && dayjs(timer[0]).format("YYYY-MM-DD HH:mm:ss") || '',
        endT: timer && dayjs(timer[1]).format("YYYY-MM-DD HH:mm:ss") || '',
        model: model,
        page: this.current,
        size: this.pageSize,
      };
      return request;
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  padding: 20px 20px;
}
::v-deep {
  // .el-table__column-filter-trigger {
  //   margin-left: 8px;
  // }
  .el-table td,
  .el-table th {
    padding: 3px 0;
    text-align: center;
    border: 1px solid #ebeef5;
  }
}
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
